<template>
  <transition name="fade-transform" mode="out-in">
    <div class="notice-card__wrap" v-if="showCard">
      <div class="notice-card">
        <div class="notice-card__top">
          <div class="card-top_l">
            <yun-avatar  size="42px" name="系"></yun-avatar>
            <div class="info-box">
              <yun-icon class="close" name="close1" @click.native="showAlert"></yun-icon>

              <div class="info1">
                <p class="name">消息提示：</p>
                <!--              <p class="thing">{{thing}}</p>-->
                <p class="date">{{dataConvert(createTime)}}</p>
              </div>
              <div class="info2" v-html="mscContent"></div>
            </div>
          </div>
          <div class="card-top_r">


            <p v-if="status===0" class="unread" @click="dataPutRead">标记已读</p>
            <p v-if="status===1"  class="read">消息已读</p>
          </div>
        </div>
      </div>
    </div>
  </transition>

</template>


<script>
  import {dateConvert} from '../../action/utils/dataConvert'
  import config from "../../action/config";

  export default {
    name:'noticeCard',
    data(){
      return{
        src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
        createTime:'2020-1-1',
        mscContent:'manmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanman',
        userId:'',
        status:1,
        messageId:'',
        showCard:true,
      }
    },

    props:{
      info:{
        type:Object,
        default:()=>({})
      }
    },

    created() {
      this.dataGet2Info()
    },
    methods:{
      dataConvert(date){
        return dateConvert(date)
      },

      dataGet2Info(){
        let info = this.info;
        this.createTime = info.createTime;
        this.mscContent = info.mscContent;
        this.userId = info.userId;
        this.status = info.status;
        this.messageId = info.messageId;
      },

      dataPutRead() {
        this.$axios.$put(config.api.put.Message.read+this.messageId+'/read').then((response) => {
          if (response.code=== 0) {
            this.$message({
              type: 'success',
              message: '已标记已读'
            });
            this.status =1
          } else {
            this.$message({
              type: 'warning',
              message: '操作失败'
            });
          }
        })
      },


      showAlert(){
        this.$alert('确认删除？', '', {
          confirmButtonText: '确定',
          callback: action => {
            this.dataDeleteMessage()
          }
        });
      },

      dataDeleteMessage() {



        this.$axios.$delete(config.api.delete.Message.delete+this.messageId).then((response) => {

          if(response.code===0){
            this.$message({
              type: 'success',
              message: '已删除消息！'
            });
            this.showCard = false;
          }else{
            this.$message({
              type: 'warning',
              message: '删除消息失败！'
            });
          }

        })


      },

    }
  }
</script>


<style lang="scss" >

  .notice-card__wrap{
    .notice-card{
      background-color: #fff;
      width:890*$length;
      padding:18*$length 24*$length 20*$length;
      border-bottom:1px solid #EFEFEF;
      .notice-card__top{
        @extend %flex-row-spb;
        align-items: flex-end;
        .card-top_l{
          @extend %flex-row-spb;
          align-items: flex-start;
          justify-content: flex-start;

          .info-box{
            margin-left: 14*$length;
            width:646*$length;
            position: relative;
            .close{
              position: absolute;
              right:-180*$length;
              top:0;
              font-size: 10px;
              color:#999;
              &:hover{
                color:#00AAE6;
              }
            }

            .info1{
              @extend %flex-row-spb;
              justify-content: flex-start;
              .name{
                @include fontStyle(12,16,500,#000,left);
              }
              .thing{
                margin-left:14*$length;
                @include fontStyle(12,16,500,#333,left);

                span{
                  color:#00AAE6;
                }

              }
              .date{
                margin-left:14*$length;
                @include fontStyle(12,16,500,#999,left);

              }
            }

            .info2{
              margin-top: 18*$length;
              @include fontStyle(12,20,500,#333,left);
              height:auto;
              word-break: break-word;
              a{
                color:#00AAE6;
              }
            }

          }
        }

        .card-top_r{
          height:100%;
          @extend %flex-column-spb;
          /*justify-content: flex-end;*/
          .unread{
            @extend %cursorPointer;
            @extend %animate-transition;
            @include fontStyle(12,36,500,#fff,center);
            background-color: #00AAE6;
            border-radius: 4*$length;
            width:90*$length;

            &:hover{
              filter:brightness(130%);
            }
          }
          .read{
            @extend %cursorPointer;
            @extend %animate-transition;
            @include fontStyle(12,36,500,#fff,center);
            background-color: coral;
            border-radius: 4*$length;
            width:90*$length;

            &:hover{
              filter:brightness(130%);
            }
          }

          h6{
            @extend %animate-transition;

            @extend %cursorPointer;
            @include fontStyle(12,36,500,#aaa,center);
            background-color: #fff;
            border-radius: 4*$length;
            width:100*$length;
            border:1px solid #F0F0F0;
            &:hover{
              filter:brightness(110%);
            }
          }
        }
      }

      .notice-card__bottom{
        @extend %flex-row-spb;
        justify-content: flex-end;
        .comment-card{
          width:834*$length;
          box-sizing: border-box;
          padding:14*$length 16*$length;
          background-color: #F4F8FA;
          border-radius: 4*$length;
          margin-top:20*$length;

          .info1{
            text-align: left;
            .name{
              @include fontStyle(14,22,500,#666,left)
            }
            .comment{
              @include fontStyle(14,22,500,#333,left)
            }
          }
          .info2{
            margin-top: 10*$length;
            @include fontStyle(12,16,500,#999,left)
          }
        }
      }
    }
  }

</style>
